import React from "react";
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
// 代码高亮主题风格, vscDarkPlus vscode 暗色主题,  darcula  webstorm 暗色主题
import {vscDarkPlus, darcula, dark} from 'react-syntax-highlighter/dist/esm/styles/prism'

interface IProps {
  textContent: string;
  language: string;
  theme?: { [key: string]: React.CSSProperties };
}

const SyntaxHighlight = (props: IProps) => {

  const {textContent, theme = darcula, language = 'txt'} = props;

  return (
    <SyntaxHighlighter
      showLineNumbers={true} // 是否展示左侧行数
      lineNumberStyle={{color: '#ddd', fontSize: 10}} // 左侧行数的样式
      style={theme}  // 主题风格
      language={language}  // 需要语言类型 如 css, jsx , javascript 等
      PreTag='div'
    >
      {String(textContent).replace(/\n$/, '')}
    </SyntaxHighlighter>
  )
}

export default SyntaxHighlight
